<html lang="zh-cn" xmlns：th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>订单详情</title>
    <link rel="stylesheet" th:href="@{/html/css/book.css}">

<!--    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.min.css}">-->
    <link th:href="@{https://fonts.googleapis.com/css?family=Work+Sans:300,400,700}" rel="stylesheet">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.min.css}">

    <link rel="stylesheet" th:href="@{/html/css/bootstrap/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/html/css/animate.css}">
    <link rel="stylesheet" th:href="@{/html/css/owl.carousel.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/flaticon/font/flaticon.css}">
    <link rel="stylesheet" th:href="@{/html/fonts/fontawesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/html/css/bootstrap-datepicker.css}">
    <link rel="stylesheet" th:href="@{/html/css/select2.css}">
    <link rel="stylesheet" th:href="@{/html/css/helpers.css}">
    <link rel="stylesheet" th:href="@{/html/css/style.css}">

</head>

<body>

    <!-- 导航 nav -->
    <nav class="navbar navbar-expand-lg navbar-dark probootstrap_navbar" id="probootstrap-navbar">
        <div class="container">
            <a class="navbar-brand" style="font-size:42px; height: 100px;" href="/">富丽堂皇大宾馆</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#probootstrap-menu" aria-controls="probootstrap-menu" aria-expanded="false" aria-label="Toggle navigation">
    <span><i class="ion-navicon"></i></span>
  </button>
            <div class="collapse navbar-collapse" id="probootstrap-menu">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item" th:each="nav:${navList}">
                        <a class="nav-link" style="font-size:20px;"
                           th:href="${nav.url}" th:text="${nav.name}">
                        </a></li>
                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/toLogin}" th:text="${session.loginName}"></a></li>
                    <li th:if="${not #strings.isEmpty(session.loginName)}"class="nav-item"><a class="nav-link" style="font-size:20px;" th:href="@{/hotel/user/mine}"  th:text="我的订单"></a></li>

                </ul>
                <img src="/html/images/admin.png" height="25px" width="25px">
            </div>
        </div>
    </nav>
    <!-- 导航 nav End -->


    <section class="probootstrap-cover overflow-hidden relative" th:style="'background-image: url('+@{/html/images/bg_1.jpg}+');'" data-stellar-background-ratio="0.5" id="section-home">
        <div class="overlay"></div>
        <div class="container" style=" padding-bottom: 10px;width: 1000px;">
            <div class="media probootstrap-media d-flex align-items-stretch mb-4 probootstrap-animate" style="padding-bottom: 50px;">
                <form action="book_ok.html" method="POST" onsubmit="return checkDate();">
                    <h4>预订信息</h4>
                    <div class="bookMsg">
                        <p>
                            <strong>房型信息</strong>
                            <span th:text="${book.type}">高级大床房</span>
                        </p>
                        <p>
                            <strong>入住日期</strong>
                            <!-- <input type="date" id="startDate" style="cursor: pointer;" /> -->
                            <span style="cursor: pointer; width: 120px;height: 30px; margin-left: 10px;"
                            th:text="${#dates.format(book.startdate,'yyyy-MM-dd')}"></span>

<!--                            <input type="text" id="startDate" style="cursor: pointer; width: 120px;height: 30px; margin-left: 10px;" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', minDate:'%y-%M-{%d}', readOnly:true})" value="${startDate}">-->
                            <span style="font-size: 14px; color: #999;">中午&nbsp;12:00&nbsp;&nbsp;后</span>
                            <strong><span style="font-size: 30px; color: rgb(180, 180, 180);">—&nbsp;&nbsp;</span>退房日期</strong>
                            <!-- <input type="date" id="endDate" /> -->
                            <!--<input type="text" id="endDate" style="cursor: pointer; width: 120px;height: 30px; margin-left: 10px;" class="Wdate" onfocus="WdatePicker({skin:'whyGreen',dateFmt: 'yyyy-MM-dd', minDate:'#F{$dp.$D(\'startDate\',{d:1})}', readOnly:true})" value="${endDate}"
                            />-->
                            <span  style="cursor: pointer; width: 120px;height: 30px; margin-left: 10px;"
                                  th:text="${#dates.format(book.enddate,'yyyy-MM-dd')}"></span>
                            <span style="font-size: 14px; color: #999;">中午&nbsp;12:00&nbsp;&nbsp;前</span>
                        </p>
                        <!-- <p>
                            <ul class="btn-numbox">
                                <li><strong style="color: black; font-size: 20px;margin-left: 30px;">房间数量</strong></li>
                                <li>
                                    <ul class="count">
                                        <li><span id="num-jian" class="num-jian">-</span></li>
                                        <li><input type="text" class="input-num" id="input-num" value="1" /></li>
                                        <li><span id="num-jia" class="num-jia">+</span></li>
                                    </ul>
                                </li>
                                <li><span class="kucun">（剩余数量:</span><span id="kcNum" class="kucun">2</span><span class="kucun">）</span></li>
                            </ul>
                        </p> -->
                        <p>
                            <strong>房费情况</strong>
                            <span class="price">￥99</span>
                        </p>
                    </div>


                    <hr style="margin-left: 20px;width: 1050px;">
                    <h4>入住信息</h4>
                    <div class="bookMsg" style="height: 320px;">
                        <p id="customers">
                            <strong>住客</strong>
                            <span name="customer" th:text="${book.customer}"></span>
                        </p>

                        <p >
                            <strong>手机号</strong>
                            <span name="tel" th:text="${book.tel}"></span>
                        </p>

                        <p >
                            <strong >身份证号</strong>
                            <span name="idnumber" th:text="${book.idnumber}"></span>

                        </p>
                    </div>


                </form>
            </div>
        </div>
    </section>




    <script th:src="@{/html/js/jquery.waypoints.min.js}"></script>

    <script th:src="@{/html/My97DatePicker/WdatePicker.js}"></script>
    <script th:src="@{/html/js/book.js}"></script>
    <!--    <script type="text/javascript" th:src="@{http://demo.cssmoban.com/cssthemes4/sbtp_62_sweetalert/lib/sweet-alert.js}"></script>-->
    <script th:src="@{/html/js/sweet-alert/sweet-alert.js}"></script>
    <script th:src="@{/html/js/jquery.min.js}"></script>

    <script th:src="@{/html/js/popper.min.js}"></script>
    <script th:src="@{/html/js/bootstrap.min.js}"></script>
    <script th:src="@{/html/js/owl.carousel.min.js}"></script>

    <script th:src="@{/html/js/bootstrap-datepicker.js}"></script>
    <script th:src="@{/html/js/jquery.waypoints.min.js}"></script>
    <script th:src="@{/html/js/jquery.easing.1.3.js}"></script>

    <script th:src="@{/html/js/select2.min.js}"></script>

    <script th:src="@{/html/js/main.js}"></script>
</body>

</html>